<template>
   <van-icon 
   :color="value ? '#ffa500' : ''" 
   :name="value ? 'star':'star-o'" 
   :loading="loading"
   @click="onCollect"
   />
</template>

<script>
import {addCollect,delCollect} from '@/api/article.js'
export default {
  data(){
    return{
    loading:false,
    }
  },
 props:{
  value:{
    type:Boolean,
    required:true,
  },
  articleID:{
    type:[Number, String, Object],
    required:true
  }
 },
 methods:{
async onCollect(){
   this.loading =true
   try {
    if(this.value){
      //已收藏--取消收藏
      await delCollect(this.articleID)
    }else{
      //未收藏--点击收藏
      await addCollect(this.articleID)
    }
    this.$emit('input',!this.value)
    this.$toast.success(!this.value ? '收藏成功':'取消收藏')
   } catch (error) {
  this.$toast.fail('操作失败，请重试')
   }
   this.loading=false
  }
 }
}
</script>

<style lang="less" scoped>

</style>